<template>
  <div class="share">
    <div class="body-content">
      <div class="logo">
        <img class="iconfont" src="" />
        <span class="name">Cloud</span>
      </div>
      <div class="code-panel">
        <div class="file-info">
          <el-avatar :size="50" :src="circleUrl" />
          <div>
            <div></div>
            <div></div>
          </div>
        </div>
        <div class="code-body">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            label-width="120px"
          >
            <el-form-item
              prop="inputText"
              label="请输入提取码："
              label-width="130"
            >
              <el-input
                v-model="ruleForm.code"
                style="width: 70%; margin-right: 10px"
              />
              <el-button type="primary" @click="submitShareCodes"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { checkShareCode } from '@/request/webShare'
const route = useRoute()
const router = useRouter()

const ruleForm = ref({
  code: ''
})
const circleUrl = ref()
const submitShareCodes = () => {
  checkShareCode(route.params.id, ruleForm.value.code).then((res) => {
    if (res.code === 200) {
      localStorage.setItem('shareCode', JSON.stringify(res.data))
      router.push('/publicPage')
    }
  })
}
</script>

<style scoped>
.code-body {
  box-sizing: border-box;
  padding: 50px 20px 60px;
}

.file-info div {
  margin-left: 10px;
  color: #eef2f6;
}

.file-info {
  /* width: 100%; */
  height: 70px;
  border-radius: 5px 5px 0 0;
  background-color: rgb(90, 156, 248);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 20px;
}

.code-panel {
  margin-top: 20px;
  background-color: white;
  width: 100%;
  height: 240px;
  border-radius: 5px;
  box-shadow: 0 0 20px silver;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bolder;
  color: rgb(90, 156, 248);
}

.logo .iconfont {
  width: 60px;
}

/* 背景 */
.share {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;

  background-color: #eef2f6;
  background-image: url('@/assets/share_bg.png');
  background-repeat: repeat-x;
  background-position: 0 bottom;
}

/* 中间框 */
.body-content {
  width: 500px;
  margin-top: 120px;
  border-radius: 20px;
}
</style>
